<!doctype html>
<html lang="en">
<head>
  <title>WebGL Demo</title>
  <meta charset="utf-8">
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script id="vertex-shader-2d" type="notjs">

  attribute vec4 a_position;
  attribute vec4 a_color;

  varying vec4 v_color;
  uniform mat4 u_matrix;



  void main() {
     gl_Position = u_matrix*a_position;
     v_color=a_color;

  }


</script>

<script id="fragment-shader-2d" type="notjs">
  precision mediump float;

  varying vec4 v_color;
  void main() {
    gl_FragColor = v_color;
  }


</script>

<script>
  main();

  function main() {
    const canvas = document.querySelector('#glcanvas');

    const gl = canvas.getContext('webgl');

    if (!gl) {
      alert('不支持该浏览器！');
      return;
    }

    //并称为
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    //找到刚刚创建的程序属性位置
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var colorLocation = gl.getAttribLocation(program, "a_color");

    var resolutionUniformLocation = gl.getUniformLocation(program, "u_matrix");


    //创建缓冲区
    var positionBuffer = gl.createBuffer();

    //绑定缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    //通过绑定点应用缓冲区中的数据
    setGeometry(gl);

    // Create a buffer to put colors in
    var colorBuffer = gl.createBuffer();
    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = colorBuffer)
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    // Put geometry data into buffer
    setColors(gl);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    //转换gl_Positon返回像素，称为屏幕空间。可用把gl.viewport把画布的当前大小传递给它
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    //把画布清理干净
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.CULL_FACE);

    //告诉webgl要执行那个着色器程序
    gl.useProgram(program);

    //告诉webgl如何从上面设置的缓冲区中获取数据，并将其提供给着色器中的属性
    gl.enableVertexAttribArray(positionAttributeLocation);

    //绑定位置缓冲区。
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // 告诉属性如何从位置缓冲区获取数据(数组_缓冲器)
    var size = 3;          // 每次迭代2个组件
    var type = gl.FLOAT;   // 数据为32位浮点数。
    var normalize = false; // 不要标准化数据
    var stride = 0;        // 0=向前移动，大小*每次迭代的大小(类型)，以获得下一个位置
    var offset = 0;        // 从缓冲区的开头开始
    gl.vertexAttribPointer(
      positionAttributeLocation, size, type, normalize, stride, offset)

    // Turn on the color attribute
    gl.enableVertexAttribArray(colorLocation);

    // Bind the color buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

    // Tell the attribute how to get data out of colorBuffer (ARRAY_BUFFER)
    var size = 3;                 // 3 components per iteration
    var type = gl.UNSIGNED_BYTE;  // the data is 8bit unsigned values
    var normalize = true;         // normalize the data (convert from 0-255 to 0-1)
    var stride = 0;               // 0 = move forward size * sizeof(type) each iteration to get the next position
    var offset = 0;               // start at the beginning of the buffer
    gl.vertexAttribPointer(
      colorLocation, size, type, normalize, stride, offset);


    let matrix=projection(gl.canvas.clientWidth,gl.canvas.clientHeight,400)
    matrix = xRotate(matrix, 0.6981317007977318);
    matrix = yRotate(matrix, 0.4363323129985824);
    matrix = zRotate(matrix, 5.672320068981571);
    matrix = translate(matrix, 0, 50, 0);

    gl.uniformMatrix4fv(resolutionUniformLocation, false,matrix);

    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 6*6;
    gl.drawArrays(primitiveType, offset, count);



    function projection(width, height, depth) {
      // Note: This matrix flips the Y axis so 0 is at the top.
      return [
        2 / width, 0, 0, 0,
        0, -2 / height, 0, 0,
        0, 0, 2 / depth, 0,
        -1, 1, 0, 1,
      ];
    }
  }



  function projection(width, height, depth) {
    // Note: This matrix flips the Y axis so 0 is at the top.
    return [
      2 / width, 0, 0, 0,
      0, -2 / height, 0, 0,
      0, 0, 2 / depth, 0,
      -1, 1, 0, 1,
    ];
  }

  function multiply(a, b) {
    var a00 = a[0 * 4 + 0];
    var a01 = a[0 * 4 + 1];
    var a02 = a[0 * 4 + 2];
    var a03 = a[0 * 4 + 3];
    var a10 = a[1 * 4 + 0];
    var a11 = a[1 * 4 + 1];
    var a12 = a[1 * 4 + 2];
    var a13 = a[1 * 4 + 3];
    var a20 = a[2 * 4 + 0];
    var a21 = a[2 * 4 + 1];
    var a22 = a[2 * 4 + 2];
    var a23 = a[2 * 4 + 3];
    var a30 = a[3 * 4 + 0];
    var a31 = a[3 * 4 + 1];
    var a32 = a[3 * 4 + 2];
    var a33 = a[3 * 4 + 3];
    var b00 = b[0 * 4 + 0];
    var b01 = b[0 * 4 + 1];
    var b02 = b[0 * 4 + 2];
    var b03 = b[0 * 4 + 3];
    var b10 = b[1 * 4 + 0];
    var b11 = b[1 * 4 + 1];
    var b12 = b[1 * 4 + 2];
    var b13 = b[1 * 4 + 3];
    var b20 = b[2 * 4 + 0];
    var b21 = b[2 * 4 + 1];
    var b22 = b[2 * 4 + 2];
    var b23 = b[2 * 4 + 3];
    var b30 = b[3 * 4 + 0];
    var b31 = b[3 * 4 + 1];
    var b32 = b[3 * 4 + 2];
    var b33 = b[3 * 4 + 3];
    return [
      b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
      b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
      b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
      b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
      b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
      b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
      b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
      b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
      b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
      b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
      b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
      b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
      b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
      b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
      b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
      b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
    ];
  }

  function translation(tx, ty, tz) {
    return [
      1,  0,  0,  0,
      0,  1,  0,  0,
      0,  0,  1,  0,
      tx, ty, tz, 1,
    ];
  }

  function xRotation(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);

    return [
      1, 0, 0, 0,
      0, c, s, 0,
      0, -s, c, 0,
      0, 0, 0, 1,
    ];
  }

  function yRotation(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);

    return [
      c, 0, -s, 0,
      0, 1, 0, 0,
      s, 0, c, 0,
      0, 0, 0, 1,
    ];
  }

  function zRotation(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);

    return [
      c, s, 0, 0,
      -s, c, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1,
    ];
  }

  function scaling(sx, sy, sz) {
    return [
      sx, 0,  0,  0,
      0, sy,  0,  0,
      0,  0, sz,  0,
      0,  0,  0,  1,
    ];
  }

  function translate(m, tx, ty, tz) {
    return multiply(m, translation(tx, ty, tz));
  }

  function xRotate(m, angleInRadians) {
    return multiply(m,xRotation(angleInRadians));
  }

  function yRotate(m, angleInRadians) {
    return multiply(m, yRotation(angleInRadians));
  }

  function zRotate(m, angleInRadians) {
    return multiply(m, zRotation(angleInRadians));
  }

  function scale(m, sx, sy, sz) {
    return multiply(m, scaling(sx, sy, sz));
  }



  function setGeometry(gl) {
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        0,0,30,
        0,30,30,
        30,30,30,
        30,30,30,
        0,0,30,
        30,0,30,

        0,0,0,
        0,30,0,
        30,30,0,
        30,30,0,
        0,0,0,
        30,0,0,

        0,0,0,
        0,0,30,
        30,0,0,
        30,0,0,
        30,0,30,
        0,0,30,

        0,0,0,
        0,30,0,
        0,30,30,
        0,30,30,
        0,0,30,
        0,0,0,

        0,30,0,
        30,30,0,
        30,30,30,
        30,30,30,
        0,30,30,
        0,30,0,

        30,0,0,
        30,30,0,
        30,30,30,
        30,30,30,
        30,0,30,
        30,0,0,


      ]),
      gl.STATIC_DRAW);
  }
  function setColors(gl) {
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Uint8Array([
        // left column front
        200,  70, 120,
        200,  70, 120,
        200,  70, 120,
        200,  70, 120,
        200,  70, 120,
        200,  70, 120,



        // left column back
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,



        // top
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,

        // top rung right
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,



        // top of middle rung
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,



        // bottom
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
]),
      gl.STATIC_DRAW);
  }
</script>
</html>

